<!--成绩课程审核-->

<template>
  <div class="wrapper-container" style="width:100%">
    <el-form ref="form" class="my-form" style="margin:0">
      <el-row class="single-row">
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 课程编号</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.coursenumber }}
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 课程名称</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.coursename }}
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 任课教员</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.teachingfaculty }}
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 成绩分制</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.scoretypecode }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="single-row">
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 课下作业成绩所占比例</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.usualscorerate }}%
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 课堂测评成绩所占比例</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.examscorerate }}%
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 期中考试成绩所占比例</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.midtermscorerate }}%
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="item-row">
            <el-col class="name-col" :span="10"> 课终考核成绩所占比例</el-col>
            <el-col class="content-col" :span="14">
              {{ baseInfo.experimentscorerate }}%
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-container">
      <el-table v-if="!checking" :data="tableData" class="xpaas-table-class" row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class" header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column prop="serialNumber" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="studentid" label="学号姓名" align="center">
        </el-table-column>
        <el-table-column prop="majorclass" label="专业班次" align="center">
        </el-table-column>
        <el-table-column prop="naturecourse" label="成绩性质" align="center">
        </el-table-column>

        <el-table-column v-for="item in itemTypeLoop" :key="item.toString()" :prop="item" width="210" align="center">
          <template slot="header" slot-scope="scope">
            <el-checkbox :indeterminate="baseInfo[item + 'isIndeterminate']" v-model="baseInfo[item + 'selectAll']"
              @change="
                (e) => {
                  handleCheckAllChange(e, item);
                }
              "></el-checkbox>
            {{ itemTypeObject[item] }}成绩<br />
            <span style="font-weight: 400; font-size: 14px">
              (<span style=" text-decoration:underline;" v-if="baseInfo[item + '1'] === '0'"
                @click="tobar(item)">未录</span>
              <span v-else>未录</span>
              <span style="color: red">{{ baseInfo[item + "1"] }}</span>
              /已录<span style="color: red">{{ baseInfo[item + "2"] }}</span>/已审<span style="color: red">{{ baseInfo[item
                  + "3"]
              }}</span>)
            </span>
          </template>
          <template slot-scope="scope">
            <Subscript :className="
              scope.row[item].split(',')[1] == '2' ? 'oclock' : 'check'
            "></Subscript>
            <div v-if="scope.row[item].split(',')[0]">
              <el-checkbox :value="scope.row[item + 'select']" @change="
                (e) => {
                  scope.row[item + 'select'] = e;
                  handleCheckedCitiesChange(e, item, scope.row.serialNumber);
                }
              "></el-checkbox>
              <span style="margin-left: 5px" :style="{ color: scope.row[item].split(',')[0] < '60' ? 'red' : '' }">{{
                  scope.row[item].split(',')[0]
              }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table :style="{
        'max-width': 210 * itemTypeLoop2.length + 2 + 'px',
        'margin-left': '10px',
      }" v-if="!checking && itemTypeLoop2.length" :data="tableData" class="xpaas-table-class"
        row-class-name="xpaas-row-class" cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class" header-cell-class-name="xpaas-header-cell-class">
        <el-table-column v-for="item in itemTypeLoop2" :key="item.toString()" :prop="item" width="210" align="center">
          <template slot="header" slot-scope="scope">
            {{ itemTypeObject[item] }}成绩<br />
            <span style="font-weight: 400; font-size: 14px">
              ( <span style=" text-decoration:underline;" v-if="baseInfo[item + '1'] === '0'"
                @click="tobar(item)">未录</span>
              <span v-else>未录</span>
              <span style="color: red">{{ baseInfo[item + "1"] }}</span>
              /已录<span style="color: red">{{ baseInfo[item + "2"] }}</span>
              /已审<span style="color: red">{{ baseInfo[item + "3"] }}</span>)
            </span>
          </template>
          <template slot-scope="scope">
            <Subscript :className="
              scope.row[item].split(',')[1] == '2' ? 'oclock' : 'check'
            "></Subscript>
            <div v-if="scope.row[item].split(',')[0]">
              <span style="margin-left: 5px" :style="{ color: scope.row[item].split(',')[0] < '60' ? 'red' : '' }">{{
                  scope.row[item].split(',')[0]
              }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    updateCjSh   点击审核按按钮-->
    <div class="bottom-block" v-if="!checking">
      <div style="display: flex; justify-content: space-around">
        <button class="search-button" @click="updateCjSh('通过')">
          审核通过
        </button>
        <button class="search-button" @click="updateCjSh('不通过')" style="width:110px">
          审核不通过
        </button>
        <!-- <ButtonItem
          :name="'审核通过'"
          :link="''"
          :icon="''"
          @click="updateCjSh('通过')"
          :buttonColor="'blue'"
        ></ButtonItem>
        <ButtonItem
          :name="'审核不通过'"
          :link="''"
          :icon="''"
          @click="updateCjSh('不通过')"
          :buttonColor="'red'"
        ></ButtonItem> -->
      </div>
    </div>
  </div>
</template>

<script>
import ButtonItem from "../../../components/ButtonItem.vue";
import Subscript from "../../../components/Subscript.vue";
import { scorecj1, scorecj2, updateCjSh } from "@/api/admin1/check";

export default {
  components: {
    ButtonItem,
    Subscript,
  },
  data() {
    return {
      checking: false,
      itemType: this.$route.query.itemTypes
        ? this.$route.query.itemTypes.split(",")
        : ["value1"],
      itemTypeObject: {
        value1: "课下作业",
        value2: "课堂测评",
        value3: "期中考试",
        value4: "课终考核",
      },
      baseInfo: {
        // coursenumber: "1234567",
        // coursename: "话语分析专题研究",
        // teachingfaculty: "李教员",
        // scoretypecode: "百分制",
        // usualscorerate: "80",
        // examscorerate: "10",
        // midtermscorerate: "10",
        // experimentscorerate: "10",
        //
        // value1selectAll: false,
        // value2selectAll: false,
        // value3selectAll: false,
        // value4selectAll: false,
        // value1isIndeterminate: false,
        // value2isIndeterminate: false,
        // value3isIndeterminate: false,
        // value4isIndeterminate: false,
        // value4: "10",
        // value11: "0",
        // value12: "80",
        // value13: "20",
        // value21: "0",
        // value22: "80",
        // value23: "80",
        // value31: "0",
        // value32: "80",
        // value33: "20",
        // value41: "0",
        // value42: "80",
        // value43: "80",
      },

      tableData: [],
      multipleSelection: [],
    };
  },
  mounted() {
    this.scorecj1(),
      this.scorecj2(),
      this.tableData.forEach((item) => {
        item.value1select = false;
        item.value2select = false;
        item.value3select = false;
        item.value4select = false;
      });
  },
  methods: {
    //根据ID 查询数据上边数据
    scorecj1() {
      return new Promise(() => {
        scorecj1(this.$route.query.planid).then(res => {
          if (res.data.code == 200) {
            this.baseInfo = res.data.data
            let data = res.data.data;
            let obj = new Object();
            let ktworkList = data.ktwork.split('/')
            for (const ktworkListKey in ktworkList) {
              obj["value1" + (parseInt(ktworkListKey) + 1)] = ktworkList[ktworkListKey]
            }
            let ktreviewList = data.ktreview.split('/')
            for (const ktreviewListKey in ktreviewList) {
              obj["value2" + (parseInt(ktreviewListKey) + 1)] = ktreviewList[ktreviewListKey]
            }
            let qzreviewList = data.qzreview.split('/')
            for (const qzreviewListKey in qzreviewList) {
              obj["value3" + (parseInt(qzreviewListKey) + 1)] = qzreviewList[qzreviewListKey]
            }
            let kzreviewList = data.qzreview.split('/')
            for (const kzreviewListKey in kzreviewList) {
              obj["value4" + (parseInt(kzreviewListKey) + 1)] = kzreviewList[kzreviewListKey]
            }
            this.baseInfo = { ...obj, ...this.baseInfo }
            console.log(this.baseInfo, 'tableData')
          }
        })
      })
    },

    //根据ID 查询数据下边数据
    scorecj2() {
      return new Promise(() => {
        scorecj2(this.$route.query.planid).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].serialNumber = i + 1;
              this.tableData[i].value1 = this.tableData[i].checkusualscore + ',' + this.tableData[i].kxzystate
              this.tableData[i].value2 = this.tableData[i].checkexperimentscore + ',' + this.tableData[i].ktcpstate
              this.tableData[i].value3 = this.tableData[i].checkmidtermscore + ',' + this.tableData[i].qzksstate
              this.tableData[i].value4 = this.tableData[i].issue + ',' + this.tableData[i].kzkhstate
            }
            console.log(this.tableData)
          }
        })
      })
    },

    //审核通过与不通过   通过3，不通过1
    // updateCjSh   点击审核按按钮
    updateCjSh(type) {
      let el = this;
      console.log('要审核信息1', el.tableData)
      if (el.tableData.length <= 0) {
        el.$message({ type: "error", message: '没有可审核的数据！' });
      } else {
        if (type === '不通过') {
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].kxzystate === '3') {
              this.tableData[i].kxzystate = '1'
            }
            if (this.tableData[i].ktcpstate === '3') {
              this.tableData[i].ktcpstate = '1'
            }
            if (this.tableData[i].qzksstate === '3') {
              this.tableData[i].qzksstate = '1'
            }
            if (this.tableData[i].kzkhstate === '3') {
              this.tableData[i].kzkhstate = '1'
            }
          }
        }
        let obj = this.tableData;
        console.log('要审核信息2', obj)
        return new Promise(() => {
          updateCjSh(obj).then(res => {
            if (res.data.code == 200) {
              // this.tableData = res.data.data
              this.$router.push({
                path: '/admin/examination/checkScore',
              })
              el.$message({
                message: "审核" + type + '成功',
                type: 'success'
              });
            }
          })
        })
      }
    },

    tobar(row) {
      let reportType
      switch (row) {
        case 'value1':
          reportType = '课下作业'
          break;
        case 'value2':
          reportType = '课下测评'
          break;
        case 'value3':
          reportType = '期中考试'
          break;
        case 'value4':
          reportType = '课终考核'
          break;
        default:
      }
      this.$router.push({
        path: '/admin/scoreManagement/adminCourseAsses',
        query: { reportType: reportType },
      })
      console.log(reportType)
    },
    handleCheckAllChange(val, it) {
      var _this = this;
      this.checking = true;
      this.tableData.forEach((item) => {
        // item[it + "select"] = val;
        item = this.eachHandleCheckOfList(it, item, val)
      });
      this.baseInfo[it + "isIndeterminate"] = false;
      this.baseInfo[it + "selectAll"] = val
      window.setTimeout(function () {
        _this.checking = false;
      }, 500);
      this.$forceUpdate();
    },
    eachHandleCheckOfList(filedName, item, isChecked) {
      let type
      if (isChecked) {
        type = '3'
      } else {
        type = '2'
      }
      switch (filedName) {
        case 'value1':
          item.kxzystate = '3'
          break;
        case 'value2':
          item.ktcpstate = '3'
          break;
        case 'value3':
          item.qzksstate = '3'
          break;
        case 'value4':
          item.kzkhstate = '3'
          break;
      }
      item[filedName + 'select'] = isChecked
      return item
    },
    handleCheckedCitiesChange(value, it, serialNumber) {
      console.log(value, it, serialNumber)
      let index = serialNumber - 1
      if (value) {
        switch (it) {
          case 'value1':
            this.tableData[index].kxzystate = '3'
            break;
          case 'value2':
            this.tableData[index].ktcpstate = '3'
            break;
          case 'value3':
            this.tableData[index].qzksstate = '3'
            break;
          case 'value4':
            this.tableData[index].kzkhstate = '3'
            break;
          default:
        }

      } else {
        switch (it) {
          case 'value1':
            this.tableData[index].kxzystate = '2'
            break;
          case 'value2':
            this.tableData[index].ktcpstate = '2'
            break;
          case 'value3':
            this.tableData[index].qzksstate = '2'
            break;
          case 'value4':
            this.tableData[index].kzkhstate = '2'
            break;
          default:
        }
      }
      console.log(this.tableData[index])
      var _this = this;
      this.checking = true;
      this.tableData.filter((item) => item.serialNumber == serialNumber)[0][it + "select"] = value;
      let checkedCount = this.tableData.filter((item) => item[it + "select"]).length;
      this.checkAll = checkedCount == this.tableData.length;
      this.baseInfo[it + "isIndeterminate"] = checkedCount > 0 && checkedCount < this.tableData.length;
      checkedCount == this.tableData.length && (this.baseInfo[it + "selectAll"] = true);
      checkedCount == 0 && (this.baseInfo[it + "selectAll"] = false);
      window.setTimeout(function () {
        _this.checking = false;
      }, 500);
      this.$forceUpdate();
    },
  },
  computed: {
    itemTypeLoop() {
      return this.itemType.sort();
    },
    itemTypeLoop2() {
      return ["value1", "value2", "value3", "value4"]
        .filter((e) => this.itemTypeLoop.indexOf(e) == -1)
        .sort();
    },
  },
};
</script>
<style lang="less" scoped>
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 32px;
  line-height: 32px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  color: #51aef6;

  &:nth-child(2) {
    background: #ffefef;
    border: 1px solid #fa5339;
    color: #ff3819;
    margin-left: 100px;
  }

  >span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  >img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    >div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
.item-row .el-col {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-right: none !important;
}

.item-row .el-col:not(:first-child) {
  border-left: 1px solid rgba(0, 76, 167, 0.39);
}

.single-row .el-col:not(:last-child) {
  border-right: 1px solid rgba(0, 76, 167, 0.39);
}

.my-form .single-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
}

.name-col {
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #004ca7;
  background: rgba(77, 129, 192, 0.1);
}

.content-col {
  padding-left: 10%;
  color: #004ca7;
}

.wrapper-container {
  .my-form {
    width: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;
    border-radius: 9px;
  }
}

@import "../../../styles/special.less";

.bottom-block {
  padding-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.table-container5 {
  display: flex;

  .table-data:first-child {
    border-right: none !important;
    border-radius: 9px 0px 0px 9px;
  }

  .table-data:last-child {
    border-radius: 0px 9px 9px 0px;
    border-left: 1px solid #c7d7eb !important;
  }

  .table-data:not(:first-child):not(:last-child) {
    border-right: none !important;
    border-left: 0.8px solid #c7d7eb !important;
    border-radius: 0px !important;
  }

  .table-data {
    min-height: 500px;
  }
}

.table-container ::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px !important;
}

.filter-button1::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}

.filter-button1::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}

.filter-button {
  display: flex;
  margin-top: 27px;
}

/* .wrapper-container {
  width: 1711px;
  margin: 0 auto;
} */

.table-container2 {
  .table-data {
    min-height: 500px;
  }

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-container {
  margin-top: 30px;
  display: flex;

  .table-data {
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@fontFamily: "Microsoft YaHei";

.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;

  > ::v-deep div.el-table__header-wrapper {
    >table.el-table__header {
      >thead {
        >tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;

          >th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            >div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }

  > ::v-deep div.el-table__body-wrapper {
    >table.el-table__body {
      >tbody {
        >tr.xpaas-row-class {
          >td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            >div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }

          >td.xpaas-cell-class {
            height: 76px;

            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;

            >div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
